<template>
  <div>
    <div class="tableTitle"><span class="midText">费用说明</span></div>
    <div style="widows: 70%; margin-left: 5%; margin-top: 15px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
        :inline="true"
      >
        <el-form-item label="工艺路线编号" style="width: 40%">
          <el-col>
            <el-input disabled></el-input>
          </el-col>
          <el-col style="margin-left: 10px">
            <el-switch v-model="aaa"></el-switch>系统编号
          </el-col>
        </el-form-item>
        <el-form-item
          label="工艺路线名称"
          prop="routename"
          :rules="[
            { required: true, message: '请输入工艺路线名称', trigger: 'blur' },
          ]"
          style="width: 40%"
        >
          <el-col>
            <el-input v-model="ruleForm.routename"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="routestate"
          :rules="[
            { required: true, message: '请选择状态', trigger: 'change' },
          ]"
          style="width: 100%"
        >
          <el-radio v-model="ruleForm.routestate" label="启用">启用</el-radio>
          <el-radio v-model="ruleForm.routestate" label="禁用">禁用</el-radio>
        </el-form-item>
        <el-form-item label="描述" style="width: 100%">
          <el-input type="textarea" v-model="ruleForm.routeexplain"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input type="textarea" v-model="ruleForm.routeremark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableTitle" style="margin-top: 20px; margin-bottom: 20px">
      <span class="midText">费用说明</span>
    </div>
    <div style="widows: 70%; margin-left: 5%; margin-top: 20px">
      <el-button @click="craftprocessadd()">添加</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="serialnumber" label="序号" width="100" />
        <el-table-column prop="process" label="工序名称" width="120" />
        <el-table-column prop="nextprocess" label="下一道工序" width="120" />
        <el-table-column prop="relation" label="关系" width="100" />
        <el-table-column prop="keyprocess" label="关键工序" width="100" />
        <el-table-column prop="showcolor" label="显示颜色" width="100" />
        <el-table-column
          prop="readinesstime"
          label="准备时间（小时）"
          width="120"
        />
        <el-table-column
          prop="waitingtime"
          label="等待时间（小时）"
          width="150"
        />
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column label="操作" width="200">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick"
              >删除</el-button
            >
            <el-button link type="primary" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="序号">
            <el-input v-model="form.serialnumber"></el-input>
          </el-form-item>
          <el-form-item label="工序">
            <el-select v-model="form.process" clearable placeholder="请选择">
              <el-option v-for="a in gongxu" :key="a" :label="a.processname" :value="a.processname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下一道工序">
            <el-select
              v-model="form.nextprocess"
              clearable
              placeholder="请选择"
            >
            <el-option v-for="a in gongxu" :key="a" :label="a.processname" :value="a.processname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关系">
            <el-select v-model="form.relation" clearable placeholder="请选择">
              <el-option v-for="index in guanxi" :key="index" :label="index.text" :value="index.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键工序">
            <el-radio v-model="form.keyprocess" label="启用">启用</el-radio>
            <el-radio v-model="form.keyprocess" label="禁用">禁用</el-radio>
          </el-form-item>
          <el-form-item label="显示颜色">
            <el-col>
              <el-color-picker v-model="form.showcolor"></el-color-picker>
            </el-col>
            <el-col>
              <el-input
                disabled
                style="widows: 50"
                v-model="form.showcolor"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="准备时间">
            <el-input v-model="form.readinesstime"></el-input>小时
          </el-form-item>
          <el-form-item label="等待时间">
            <el-input v-model="form.waitingtime"></el-input>小时
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="CraftAdd('form')">确定</el-button>
            <el-button @click="resetForms('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
    <el-button type="primary" @click="tiaozhuan()">关闭</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </div>
</template>
    <script>
import { CraftProcessAdd } from "../../api/craftprocess";
import { GetDictionary } from "../../api/Dictionaries";
import { show } from "../../api/process";
export default {
  data() {
    return {
      //工艺路线主表
      ruleForm: {
        routename: "",
        routestate: "",
        routeexplain: "",
        routeremark: "",
        item: [],
      },
      //按钮
      aaa: false,
      //显示
      tableData: [],
      //对话框
      dialogFormVisible: false,
      //工艺路线字表
      form: {
        serialnumber: undefined,
        process: "",
        nextprocess: "",
        relation: "",
        keyprocess: "",
        showcolor: "",
        readinesstime: undefined,
        waitingtime: undefined,
        remark: "",
      },
      guanxi:[],
      gongxu:[]
    };
  },
  created()
  {
    this.bind();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert("submit!");
          console.log(this.ruleForm);
          CraftProcessAdd(this.ruleForm).then((ros) => {
            if (ros.result > 0) {
              alert("添加成功");
            } else {
              alert("添加失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //添加点击
    craftprocessadd() {
      this.dialogFormVisible = true;
    },
    //弹出框确定点击事件
    CraftAdd() {
      this.dialogFormVisible = false;
      this.ruleForm.item.push(JSON.parse(JSON.stringify(this.form)));
      this.tableData = this.ruleForm.item;
      console.log(this.ruleForm.item);
    },
    //取消点击事件
    tiaozhuan() {
      this.$router.push("CrafProcessShow");
    },
    resetForms() {
      this.form = null;
    },
    bind(){
      GetDictionary("工序关系").then(ros=>{
        this.guanxi=ros.result
      }),
      show().then(ros=>{
        this.gongxu=ros.result
      })
    }
  },
};
</script>


<style scoped>
.tableTitle {
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: 1px;
  background-color: #d4d4d4;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
</style>